import { Input, Select } from "antd";
import { useComponentsStore } from "@/stores/edit-pages-store";
import { useEffect, useState } from "react";
import { omit } from "lodash-es";

export interface ShowMessageConfig {
  type: "showMessage";
  label: string;
  config: {
    type: "success" | "error";
    text: string;
  };
}
interface ShowMessageProps {
  value?: ShowMessageConfig["config"];
  defaultValue?: ShowMessageConfig["config"];
  onChange?: (config: ShowMessageConfig) => void;
}
export const showMessageMsg = {
  type: "showMessage",
  label: "消息提醒",
  desc: "弹出消息提醒"
}
export function ShowMessage(props: ShowMessageProps) {
  const { value:val, defaultValue, onChange } = props;

  const { curComponentId } = useComponentsStore();

  const [type, setType] = useState<"success" | "error">(
    defaultValue?.type || "success"
  );
  const [text, setText] = useState<string>(defaultValue?.text || "");

  useEffect(() => {
    if (val) {
      setType(val.type);
      setText(val.text);
    }
  }, [val]);
  function messageTypeChange(value: "success" | "error") {
    if (!curComponentId) return;

    setType(value);

    onChange?.({
      ...omit(showMessageMsg,'desc') as Omit<ShowMessageConfig, "config">,
      config: {
        type: value,
        text,
      },
    });
  }

  function messageTextChange(value: string) {
    if (!curComponentId) return;

    setText(value);

    onChange?.({
      type: "showMessage",
      label: "显示消息",
      config: {
        type,
        text: value,
      },
    });
  }

  return (
    <div className="mt-[10px] p-4">
      <div className="flex items-center gap-[10px]">
        <div>类型：</div>
        <div>
          <Select
            style={{ width: 500, height: 50 }}
            options={[
              { label: "成功", value: "success" },
              { label: "失败", value: "error" },
            ]}
            onChange={value => {
              messageTypeChange(value);
            }}
            value={type}
          />
        </div>
      </div>
      <div className="flex items-center gap-[10px] mt-[10px]">
        <div>文本：</div>
        <div>
          <Input
            style={{ width: 500, height: 50 }}
            onChange={e => {
              messageTextChange(e.target.value);
            }}
            value={text}
          />
        </div>
      </div>
    </div>
  );
}
